<template>
	<!-- 工单基础信息 -->
	<div>
		
		<div class=" smp_panel_1">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">流程图</div>
			</div>
		

		<div class="serviceInfo smp_panel_body">
			<!-- <img alt="example" style="width: 100%" :src="furl" /> -->
			<div class="containers" ref="content">
				<div class="canvas" ref="canvas"></div>
			</div>
		</div>
		</div>
		<div class=" smp_panel_1">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">流转信息</div>
			</div>
		<div class=" smp_panel_body" >
			<el-table :data="list" size="mini" stripe  style="width: 100%">
				<el-table-column prop="name" label="节点名称"  align="center">
				</el-table-column>
				<el-table-column prop="assignee" label="处理人"  show-overflow-tooltip align="center">
					<template slot-scope="scope">
						<template v-if="scope.row.assignee">
								<!-- {{scope.row.assignee|getUserChinesName}} -->
								<el-popover trigger="hover" placement="bottom-start">
									<div class=" smp_panel_1">
										
										<div class="smp_panel_header" >
											<div class="smp_panel_pre"></div>
											<div class="smp_panel_title">用户信息</div>
											
										</div>
									<div class="smp_panel_body" >
									
									<el-descriptions  column="2"  border  >
										<!-- <div slot="title">
											{{scope.row.applyUser|getUserChinesName}}
										</div> -->
										<el-descriptions-item label="姓名">{{scope.row.assignee|getUserChinesName}}</el-descriptions-item>
										<el-descriptions-item label="电话">{{$store.getters.getUser(scope.row.assignee).phone}}</el-descriptions-item>
									    <el-descriptions-item label="部门">{{$store.getters.getUser(scope.row.assignee).orgName}}</el-descriptions-item>
									</el-descriptions>
									</div>
									</div>
									
									<div slot="reference">
										<el-link type="primary" :underline="false">
											{{scope.row.assignee|getUserChinesName}}
										</el-link>
										
									</div>
								</el-popover>
								
								
								
						</template>
						<template v-if="!scope.row.assignee">
								<template v-for="(item,index) in scope.row.adminUsers">
									<span v-if="index>0" > , </span>
									 <el-popover trigger="hover" placement="bottom-start" style="display:inline-block">
										<div class=" smp_panel_1">
				
											<div class="smp_panel_header" >
												<div class="smp_panel_pre"></div>
												<div class="smp_panel_title">用户信息</div>
												
											</div>
										<div class="smp_panel_body" >
										
										<el-descriptions  column="2"  border  >
											<el-descriptions-item label="姓名">{{item|getUserChinesName}}</el-descriptions-item>
											 <el-descriptions-item label="电话">{{$store.getters.getUser(item).phone}}</el-descriptions-item>
										    <el-descriptions-item label="部门">{{$store.getters.getUser(item).orgName}}</el-descriptions-item>
										</el-descriptions>
										</div>
										</div>
										
										<div slot="reference">
											<el-link type="primary" :underline="false">
												{{item|getUserChinesName}}
											</el-link>
											
										</div>
									</el-popover>
								</template>
						</template>
					
					</template>
				</el-table-column>
				<el-table-column prop="startTime" label="任务开始时间" align="center">
				</el-table-column>
				<el-table-column prop="endTime" label="处理时间" align="center">
				</el-table-column>
		
				<el-table-column prop="resultMessage" label="处理意见" align="center">
				</el-table-column>
				<el-table-column prop="status" label="处理结果" align="center">
					<template slot-scope="scope">
						{{scope.row.status|dictName("SMP0012")}}
					</template>
					
				</el-table-column>
			</el-table>
		</div>
		</div>
	</div>
</template>

<script>
	"use strict";
	import {
		view,queryhis,view1
	} from '@/api/process.js'; 
	import BpmnViewer from 'bpmn-js'
	import demandProcess from  '@/assets/demandProcess.js'
	export default {
		data() {
			return {
				furl:"",
				list:[],
				bpmnViewer: null,
				container: null,
				}
		},
		
		props: {
			row: {
				type: Object,
				default: {}
			},
		},
		created() {
			
			this.showImg(this.row);
			this.showHis(this.row);
			
		},
		mounted(){
			const canvas = this.$refs.canvas
			this.bpmnViewer = new BpmnViewer({
				container: canvas
			})
			this.createNewDiagram();
			this.addMarker();
		},
		methods: {
			showImg(row) {
				//下载文件
				view(row).then(res => {
					let file = {
						uid: '-1', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
						name: '背景图片', // 文件名
						status: 'done', // 状态有：uploading done error removed
					}
					const blob = new Blob([res.data]);
					var href = window.URL.createObjectURL(blob);
					this.furl = href;
				})
			},
			
			showHis(row) {
				//下载文件
				queryhis(row).then(response => {
				
					this.list = response.data.extend;
					
				})
			},
			
			async createNewDiagram() {
				const bpmnXml = demandProcess();
				console.info(bpmnXml);
				await this.bpmnViewer.importXML(bpmnXml).then(() => {
					//获取执行节点信息
					
					view1(this.row).then(response=>{
						console.info(response.data.extend)
						var canvas = this.bpmnViewer.get('canvas');
						/* let highLightedFlowIds = response.data.extend.highLightedFlowIds;
						highLightedFlowIds.forEach(item=>{
							canvas.addMarker(item, 'highlightFlow');
						}); */
						let hightLightElements = response.data.extend.hightLightElements;
						hightLightElements.forEach(item=>{
							canvas.addMarker(item, 'highlight1');
						});
						let highLightedActivitiIds = response.data.extend.highLightedActivitiIds;
						highLightedActivitiIds.forEach(item=>{
							canvas.addMarker(item, 'highlight');
						});
					});
					
					
					
					
				/* 	canvas.addMarker('start', 'highlight');
					canvas.addMarker('demandApplication', 'highlight');
					canvas.addMarker('exclusivegateway1', 'highlight');
					canvas.addMarker('flow8', 'highlightFlow');
					
					canvas.addMarker('Examine', 'highlight1');
					canvas.addMarker('flow28', 'highlightFlow');
					canvas.addMarker('flow29', 'highlightFlow');
					canvas.addMarker('flow26', 'highlightFlow1'); */
				});
			},
			addMarker() {
				/* var canvas = this.bpmnViewer.get('canvas');
				canvas.addMarker('flow28', 'highlight'); */
			}
			
			
		}
	};
</script>

<style scoped>
	.detailsTitle {
		color: black;
		font-size: 18px;
		text-align: left;
		margin-top: 10px;
		margin-left: 20px;
		margin-bottom: 10PX;
		border-left: 3px solid #090;
		line-height: 24px;
		padding-left: 10px;
		color: #57595d;
	}
	
	.serviceInfo {
		text-align: left;
		margin-left: 40px;
		margin-right: 40px;
	}
	
	.serviceInfo img {
		line-height: 30px;
		text-align: left;
		color: #606266;
		font-size: 14px;
		padding: 10px;
		margin-top: -100px;
		margin-left: -20px;
	}
</style>
<style>
	.canvas {
		height: 360px;
		margin-left: -110px;
		margin-top: -60px;
	}

	/*流程高亮*/
	.highlight .djs-visual> :nth-child(1) {

		fill: rgba(0, 170, 127, 0.6) !important;
	}

	/*流程高亮*/
	.highlight1 .djs-visual> :nth-child(1) {

		fill: rgba(255, 85, 0, 0.4) !important;
	}

	.highlightFlow .djs-visual> :nth-child(1) {
		stroke: rgba(0, 170, 127, 0.6) !important;
		
	}
	.highlightFlow1 .djs-visual> :nth-child(1) {
		stroke: rgba(255, 0, 0, 0.6) !important;
		
	}
	
	.bjs-powered-by{
		display: none;
	}
	
	
	
	
</style>